<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>投票中心 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --secondary: #7c3aed;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-tertiary: #94a3b8;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 12px;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
        }
        
        .nav-btn.primary {
            color: var(--primary);
        }
        
        /* 高级筛选区域 */
        .filter-container {
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            padding: 12px 16px;
        }
        
        /* 搜索框 */
        .search-group {
            position: relative;
            margin-bottom: 16px;
        }
        
        .search-input {
            width: 100%;
            padding: 12px 16px 12px 44px;
            border-radius: 24px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 14px;
            outline: none;
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
            font-size: 18px;
        }
        
        /* 筛选标签组 */
        .filter-section {
            margin-bottom: 16px;
        }
        
        .filter-label {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-primary);
            display: flex;
            justify-content: space-between;
        }
        
        .filter-label .more {
            font-size: 13px;
            font-weight: normal;
            color: var(--primary);
        }
        
        .filter-tabs {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: none;
        }
        
        .filter-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tab {
            padding: 6px 14px;
            border-radius: 18px;
            font-size: 14px;
            white-space: nowrap;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .filter-tab.active {
            background-color: var(--primary);
            color: white;
        }
        
        .filter-tab .badge {
            background-color: rgba(0,0,0,0.1);
            color: var(--text-secondary);
            font-size: 11px;
            margin-left: 4px;
            padding: 1px 5px;
        }
        
        .filter-tab.active .badge {
            background-color: rgba(255,255,255,0.2);
            color: white;
        }
        
        /* 高级筛选按钮 */
        .advanced-filter-btn {
            width: 100%;
            padding: 10px;
            border-radius: 8px;
            background-color: var(--bg-light);
            border: 1px solid var(--border-light);
            color: var(--text-primary);
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        /* 筛选结果区域 */
        .filter-results {
            padding: 8px 16px;
            background-color: rgba(79, 70, 229, 0.05);
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-chip {
            padding: 4px 10px;
            background-color: white;
            border-radius: 16px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 6px;
            border: 1px solid var(--primary);
            color: var(--primary);
        }
        
        .filter-chip .close {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            cursor: pointer;
        }
        
        .clear-filters {
            font-size: 13px;
            color: var(--text-secondary);
            margin-left: auto;
            cursor: pointer;
        }
        
        /* 投票列表容器 */
        .votes-container {
            padding: 16px;
        }
        
        .votes-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .votes-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .votes-count {
            color: var(--text-tertiary);
            font-size: 14px;
        }
        
        .sort-dropdown {
            background: none;
            border: none;
            color: var(--primary);
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 投票卡片通用样式 */
        .vote-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin-bottom: 16px;
            overflow: hidden;
            transition: transform 0.2s ease;
        }
        
        .vote-card:hover {
            transform: translateY(-2px);
        }
        
        .vote-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .vote-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .vote-creator {
            flex: 1;
        }
        
        .creator-name {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .vote-time {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .vote-menu {
            color: var(--text-tertiary);
            background: none;
            border: none;
            font-size: 16px;
        }
        
        .vote-content {
            padding: 16px;
        }
        
        .vote-title {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 12px;
            line-height: 1.4;
        }
        
        .vote-description {
            font-size: 15px;
            color: var(--text-secondary);
            margin-bottom: 16px;
            line-height: 1.5;
        }
        
        /* 投票选项通用样式 */
        .vote-options {
            margin-bottom: 16px;
        }
        
        .vote-option {
            padding: 12px;
            border-radius: 8px;
            border: 1px solid var(--border-light);
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }
        
        .vote-option:hover {
            border-color: var(--primary);
            background-color: rgba(79, 70, 229, 0.03);
        }
        
        .vote-option.selected {
            border-color: var(--primary);
            background-color: rgba(79, 70, 229, 0.05);
        }
        
        .option-check {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid var(--text-tertiary);
            display: none;
        }
        
        .vote-option.selected .option-check {
            display: block;
            background-color: var(--primary);
            border-color: var(--primary);
            position: relative;
        }
        
        .vote-option.selected .option-check::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 4px;
            top: 5px;
            left: 4px;
            border-left: 2px solid white;
            border-bottom: 2px solid white;
            transform: rotate(-45deg);
        }
        
        .option-text {
            font-size: 15px;
            margin-bottom: 8px;
            padding-right: 30px;
        }
        
        .option-stats {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .option-bar-container {
            flex: 1;
            height: 6px;
            background-color: var(--bg-light);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .option-bar {
            height: 100%;
            background-color: var(--primary);
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        
        .option-percent {
            font-size: 13px;
            color: var(--text-tertiary);
            width: 40px;
            text-align: right;
        }
        
        /* 投票类型样式 */
        .vote-type-tag {
            position: absolute;
            top: 12px;
            right: 12px;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
        }
        
        /* 无图投票样式 */
        .vote-no-image .vote-option {
            display: flex;
            flex-direction: column;
        }
        
        /* 单图投票样式 */
        .vote-single-image .vote-option {
            display: flex;
            gap: 12px;
        }
        
        .vote-single-image .option-image {
            width: 80px;
            height: 80px;
            border-radius: 6px;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .vote-single-image .option-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .vote-single-image .option-details {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        /* 多图投票样式 */
        .vote-multi-image .vote-option {
            display: flex;
            flex-direction: column;
        }
        
        .vote-multi-image .option-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .vote-multi-image .option-image {
            aspect-ratio: 1/1;
            overflow: hidden;
        }
        
        .vote-multi-image .option-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 投票底部信息 */
        .vote-footer {
            padding: 0 16px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .vote-info {
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .vote-action {
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            background-color: var(--primary);
            color: white;
        }
        
        .vote-action.voted {
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        /* 投票互动区 */
        .vote-actions {
            padding: 12px 16px;
            display: flex;
            justify-content: space-around;
            border-top: 1px solid var(--border-light);
        }
        
        .vote-action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 12px;
            padding: 4px 12px;
        }
        
        .vote-action-btn i {
            font-size: 18px;
            margin-bottom: 2px;
        }
        
        .vote-action-btn.active {
            color: var(--primary);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 70px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 22px;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 空状态 */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            text-align: center;
        }
        
        .empty-icon {
            font-size: 60px;
            color: var(--text-tertiary);
            margin-bottom: 20px;
        }
        
        .empty-text {
            font-size: 16px;
            color: var(--text-secondary);
            margin-bottom: 10px;
        }
        
        .empty-subtext {
            font-size: 14px;
            color: var(--text-tertiary);
            margin-bottom: 20px;
        }
        
        .empty-action {
            padding: 8px 20px;
            border-radius: 20px;
            background-color: var(--primary);
            color: white;
            border: none;
            font-size: 14px;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">投票中心</div>
        <button class="nav-btn primary" id="createVoteBtn">
            <i class="fas fa-plus"></i>
        </button>
    </div>
    
    <!-- 筛选和搜索区域 -->
    <div class="filter-container">
        <!-- 搜索框 -->
        <div class="search-group">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索投票标题、描述或创建者...">
        </div>
        
        <!-- 分类筛选 -->
        <div class="filter-section">
            <div class="filter-label">
                分类 <span class="more">更多</span>
            </div>
            <div class="filter-tabs">
                <button class="filter-tab active">全部 <span class="badge">128</span></button>
                <button class="filter-tab">生活 <span class="badge">42</span></button>
                <button class="filter-tab">娱乐 <span class="badge">36</span></button>
                <button class="filter-tab">工作 <span class="badge">24</span></button>
                <button class="filter-tab">科技 <span class="badge">15</span></button>
                <button class="filter-tab">美食 <span class="badge">11</span></button>
            </div>
        </div>
        
        <!-- 时间筛选 -->
        <div class="filter-section">
            <div class="filter-label">
                时间 <span class="more">更多</span>
            </div>
            <div class="filter-tabs">
                <button class="filter-tab active">全部时间</button>
                <button class="filter-tab">今天</button>
                <button class="filter-tab">本周</button>
                <button class="filter-tab">本月</button>
                <button class="filter-tab">近3个月</button>
            </div>
        </div>
        
        <!-- 类型筛选 -->
        <div class="filter-section">
            <div class="filter-label">
                投票类型
            </div>
            <div class="filter-tabs">
                <button class="filter-tab active">全部类型</button>
                <button class="filter-tab">图文投票</button>
                <button class="filter-tab">纯文字投票</button>
                <button class="filter-tab">单选投票</button>
                <button class="filter-tab">多选投票</button>
            </div>
        </div>
        
        <!-- 高级筛选按钮 -->
        <button class="advanced-filter-btn" id="advancedFilterBtn">
            <i class="fas fa-sliders-h"></i> 高级筛选
        </button>
    </div>
    
    <!-- 筛选结果标签 -->
    <div class="filter-results">
        <div class="filter-chip">
            生活 <span class="close">×</span>
        </div>
        <div class="filter-chip">
            本周 <span class="close">×</span>
        </div>
        <div class="filter-chip">
            图文投票 <span class="close">×</span>
        </div>
        <div class="clear-filters" id="clearFilters">清除全部</div>
    </div>
    
    <!-- 投票列表 -->
    <div class="votes-container">
        <div class="votes-header">
            <h2 class="votes-title">符合条件的投票</h2>
            <div class="d-flex align-items-center gap-4">
                <span class="votes-count">找到 28 个投票</span>
                <select class="sort-dropdown" id="sortDropdown">
                    <option value="recommend">推荐排序</option>
                    <option value="latest">最新发布</option>
                    <option value="hot">热门优先</option>
                    <option value="ending">即将结束</option>
                </select>
            </div>
        </div>
        
        <!-- 无图投票 -->
        <div class="vote-card vote-no-image" data-id="1">
            <div class="vote-header">
                <img src="https://picsum.photos/id/64/100/100" alt="创建者头像" class="vote-avatar">
                <div class="vote-creator">
                    <div class="creator-name">设计部</div>
                    <div class="vote-time">2小时前 · 剩余1天</div>
                </div>
                <button class="vote-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="vote-content">
                <span class="vote-type-tag">纯文字</span>
                <h3 class="vote-title">公司年会主题投票，选出你最喜欢的方案</h3>
                <p class="vote-description">今年年会我们准备了三个主题方案，请大家投票选出最喜欢的一个，投票结果将作为最终方案参考。</p>
                
                <div class="vote-options">
                    <div class="vote-option" data-option="1">
                        <div class="option-text">科技未来之夜 - 融入AR/VR元素的沉浸式体验</div>
                        <div class="option-check"></div>
                        <div class="option-stats">
                            <div class="option-bar-container">
                                <div class="option-bar" style="width: 65%;"></div>
                            </div>
                            <div class="option-percent">65%</div>
                        </div>
                    </div>
                    
                    <div class="vote-option" data-option="2">
                        <div class="option-text">复古迪斯科派对 - 80年代经典元素重现</div>
                        <div class="option-check"></div>
                        <div class="option-stats">
                            <div class="option-bar-container">
                                <div class="option-bar" style="width: 25%;"></div>
                            </div>
                            <div class="option-percent">25%</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="vote-footer">
                <div class="vote-info">已有 128 人参与投票</div>
                <button class="vote-action" data-vote="1">投票</button>
            </div>
            
            <div class="vote-actions">
                <button class="vote-action-btn comment-btn" data-vote="1">
                    <i class="far fa-comment"></i>
                    <span>评论(32)</span>
                </button>
                <button class="vote-action-btn share-btn" data-vote="1">
                    <i class="far fa-share-alt"></i>
                    <span>分享</span>
                </button>
                <button class="vote-action-btn favorite-btn" data-vote="1">
                    <i class="far fa-bookmark"></i>
                    <span>收藏</span>
                </button>
            </div>
        </div>
        
        <!-- 单图投票 -->
        <div class="vote-card vote-single-image" data-id="2">
            <div class="vote-header">
                <img src="https://picsum.photos/id/65/100/100" alt="创建者头像" class="vote-avatar">
                <div class="vote-creator">
                    <div class="creator-name">摄影爱好者</div>
                    <div class="vote-time">昨天 15:30 · 剩余3天</div>
                </div>
                <button class="vote-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="vote-content">
                <span class="vote-type-tag">单图</span>
                <h3 class="vote-title">选出你认为最适合作为封面的照片</h3>
                <p class="vote-description">这是我们上周摄影活动的精选作品，将用于活动回顾封面，请帮忙选出最合适的一张。</p>
                
                <div class="vote-options">
                    <div class="vote-option" data-option="1">
                        <div class="option-image">
                            <img src="https://picsum.photos/id/29/300/300" alt="选项图片1">
                        </div>
                        <div class="option-details">
                            <div class="option-text">城市天际线 - 拍摄于中央公园观景台</div>
                            <div class="option-check"></div>
                            <div class="option-stats">
                                <div class="option-bar-container">
                                    <div class="option-bar" style="width: 45%;"></div>
                                </div>
                                <div class="option-percent">45%</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="vote-option" data-option="2">
                        <div class="option-image">
                            <img src="https://picsum.photos/id/30/300/300" alt="选项图片2">
                        </div>
                        <div class="option-details">
                            <div class="option-text">黄昏湖面 - 拍摄于西湖景区</div>
                            <div class="option-check"></div>
                            <div class="option-stats">
                                <div class="option-bar-container">
                                    <div class="option-bar" style="width: 55%;"></div>
                                </div>
                                <div class="option-percent">55%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="vote-footer">
                <div class="vote-info">已有 86 人参与投票</div>
                <button class="vote-action voted" data-vote="2">已投票</button>
            </div>
            
            <div class="vote-actions">
                <button class="vote-action-btn comment-btn" data-vote="2">
                    <i class="far fa-comment"></i>
                    <span>评论(15)</span>
                </button>
                <button class="vote-action-btn share-btn" data-vote="2">
                    <i class="far fa-share-alt"></i>
                    <span>分享</span>
                </button>
                <button class="vote-action-btn favorite-btn active" data-vote="2">
                    <i class="fas fa-bookmark"></i>
                    <span>收藏</span>
                </button>
            </div>
        </div>
        
        <!-- 多图投票 -->
        <div class="vote-card vote-multi-image" data-id="3">
            <div class="vote-header">
                <img src="https://picsum.photos/id/66/100/100" alt="创建者头像" class="vote-avatar">
                <div class="vote-creator">
                    <div class="creator-name">旅行俱乐部</div>
                    <div class="vote-time">3天前 · 剩余5天</div>
                </div>
                <button class="vote-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="vote-content">
                <span class="vote-type-tag">多图</span>
                <h3 class="vote-title">下个月团建目的地投票，你想去哪里？</h3>
                <p class="vote-description">为了让大家有更好的团建体验，我们筛选了三个热门目的地，每人限投一票，得票最多的将作为最终目的地。</p>
                
                <div class="vote-options">
                    <div class="vote-option" data-option="1">
                        <div class="option-images">
                            <div class="option-image">
                                <img src="https://picsum.photos/id/42/300/300" alt="目的地图片1">
                            </div>
                            <div class="option-image">
                                <img src="https://picsum.photos/id/43/300/300" alt="目的地图片2">
                            </div>
                            <div class="option-image">
                                <img src="https://picsum.photos/id/44/300/300" alt="目的地图片3">
                            </div>
                        </div>
                        <div class="option-text">海滨度假村 - 包含海鲜大餐和水上活动</div>
                        <div class="option-check"></div>
                        <div class="option-stats">
                            <div class="option-bar-container">
                                <div class="option-bar" style="width: 60%;"></div>
                            </div>
                            <div class="option-percent">60%</div>
                        </div>
                    </div>
                    
                    <div class="vote-option" data-option="2">
                        <div class="option-images">
                            <div class="option-image">
                                <img src="https://picsum.photos/id/45/300/300" alt="目的地图片1">
                            </div>
                            <div class="option-image">
                                <img src="https://picsum.photos/id/46/300/300" alt="目的地图片2">
                            </div>
                            <div class="option-image">
                                <img src="https://picsum.photos/id/47/300/300" alt="目的地图片3">
                            </div>
                        </div>
                        <div class="option-text">山林民宿 - 包含徒步和烧烤活动</div>
                        <div class="option-check"></div>
                        <div class="option-stats">
                            <div class="option-bar-container">
                                <div class="option-bar" style="width: 30%;"></div>
                            </div>
                            <div class="option-percent">30%</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="vote-footer">
                <div class="vote-info">已有 54 人参与投票</div>
                <button class="vote-action" data-vote="3">投票</button>
            </div>
            
            <div class="vote-actions">
                <button class="vote-action-btn comment-btn" data-vote="3">
                    <i class="far fa-comment"></i>
                    <span>评论(27)</span>
                </button>
                <button class="vote-action-btn share-btn" data-vote="3">
                    <i class="far fa-share-alt"></i>
                    <span>分享</span>
                </button>
                <button class="vote-action-btn favorite-btn" data-vote="3">
                    <i class="far fa-bookmark"></i>
                    <span>收藏</span>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-calendar-alt nav-icon"></i>
            <span>活动</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-poll nav-icon"></i>
            <span>投票</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell nav-icon"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- 高级筛选模态框 -->
    <div class="modal fade" id="advancedFilterModal" tabindex="-1">
        <div class="modal-dialog modal-fullscreen-sm-down">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">高级筛选</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 参与状态筛选 -->
                    <div class="mb-4">
                        <h6 class="mb-3">参与状态</h6>
                        <div class="d-flex flex-wrap gap-2">
                            <button class="filter-tab active">全部状态</button>
                            <button class="filter-tab">未参与</button>
                            <button class="filter-tab">已参与</button>
                        </div>
                    </div>
                    
                    <!-- 投票人数筛选 -->
                    <div class="mb-4">
                        <h6 class="mb-3">参与人数</h6>
                        <div class="d-flex flex-wrap gap-2">
                            <button class="filter-tab active">不限</button>
                            <button class="filter-tab">10人以下</button>
                            <button class="filter-tab">10-50人</button>
                            <button class="filter-tab">50-100人</button>
                            <button class="filter-tab">100人以上</button>
                        </div>
                    </div>
                    
                    <!-- 剩余时间筛选 -->
                    <div class="mb-4">
                        <h6 class="mb-3">剩余时间</h6>
                        <div class="d-flex flex-wrap gap-2">
                            <button class="filter-tab active">不限</button>
                            <button class="filter-tab">24小时内</button>
                            <button class="filter-tab">3天内</button>
                            <button class="filter-tab">1周内</button>
                            <button class="filter-tab">1个月以上</button>
                        </div>
                    </div>
                    
                    <!-- 创建者筛选 -->
                    <div class="mb-4">
                        <h6 class="mb-3">创建者</h6>
                        <div class="d-flex flex-wrap gap-2">
                            <button class="filter-tab active">全部用户</button>
                            <button class="filter-tab">我关注的人</button>
                            <button class="filter-tab">官方账号</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="applyFilters">应用筛选</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const createVoteBtn = document.getElementById('createVoteBtn');
        const filterTabs = document.querySelectorAll('.filter-tab');
        const voteOptions = document.querySelectorAll('.vote-option');
        const voteButtons = document.querySelectorAll('.vote-action');
        const commentButtons = document.querySelectorAll('.comment-btn');
        const shareButtons = document.querySelectorAll('.share-btn');
        const favoriteButtons = document.querySelectorAll('.favorite-btn');
        const toast = document.getElementById('toast');
        const advancedFilterBtn = document.getElementById('advancedFilterBtn');
        const clearFiltersBtn = document.getElementById('clearFilters');
        const filterChips = document.querySelectorAll('.filter-chip');
        const sortDropdown = document.getElementById('sortDropdown');
        const advancedFilterModal = new bootstrap.Modal(document.getElementById('advancedFilterModal'));
        const applyFiltersBtn = document.getElementById('applyFilters');
        const searchInput = document.querySelector('.search-input');
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 绑定事件
        function bindEvents() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回上一页');
            });
            
            // 创建投票按钮
            createVoteBtn.addEventListener('click', () => {
                showToast('进入创建投票页面');
            });
            
            // 筛选标签切换
            filterTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 只在同一组内切换active状态
                    const parentFilter = this.closest('.filter-tabs');
                    parentFilter.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示筛选结果
                    showToast(`已筛选: ${this.textContent.trim().split(' ')[0]}`);
                    
                    // 实际应用中这里会触发投票列表的重新加载
                });
            });
            
            // 搜索功能
            searchInput.addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    const searchText = this.value.trim();
                    if (searchText) {
                        showToast(`搜索: ${searchText}`);
                        // 实际应用中这里会触发搜索请求
                    }
                }
            });
            
            // 排序下拉框
            sortDropdown.addEventListener('change', function() {
                const sortType = this.options[this.selectedIndex].text;
                showToast(`已按${sortType}排序`);
                // 实际应用中这里会触发排序请求
            });
            
            // 高级筛选按钮
            advancedFilterBtn.addEventListener('click', () => {
                advancedFilterModal.show();
            });
            
            // 应用筛选
            applyFiltersBtn.addEventListener('click', () => {
                showToast('已应用高级筛选');
                // 实际应用中这里会处理高级筛选条件并刷新列表
            });
            
            // 清除筛选标签
            filterChips.forEach(chip => {
                const closeBtn = chip.querySelector('.close');
                closeBtn.addEventListener('click', () => {
                    const filterText = chip.textContent.trim().replace('×', '').trim();
                    chip.remove();
                    showToast(`已移除筛选: ${filterText}`);
                    
                    // 如果没有筛选标签了，隐藏清除全部按钮
                    if (document.querySelectorAll('.filter-chip').length === 0) {
                        clearFiltersBtn.style.display = 'none';
                    }
                });
            });
            
            // 清除全部筛选
            clearFiltersBtn.addEventListener('click', () => {
                document.querySelectorAll('.filter-chip').forEach(chip => chip.remove());
                // 重置所有筛选标签
                document.querySelectorAll('.filter-tab').forEach(tab => {
                    if (tab.textContent.includes('全部')) {
                        tab.classList.add('active');
                    } else {
                        tab.classList.remove('active');
                    }
                });
                showToast('已清除全部筛选条件');
                clearFiltersBtn.style.display = 'none';
            });
            
            // 选择投票选项
            voteOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const voteCard = this.closest('.vote-card');
                    const voteButton = voteCard.querySelector('.vote-action');
                    
                    // 如果已经投票则不能再选择
                    if (voteButton.classList.contains('voted')) {
                        showToast('你已参与过此投票');
                        return;
                    }
                    
                    // 清除同个投票的其他选项
                    voteCard.querySelectorAll('.vote-option').forEach(opt => {
                        opt.classList.remove('selected');
                    });
                    
                    // 选中当前选项
                    this.classList.add('selected');
                });
            });
            
            // 投票按钮
            voteButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const voteId = this.getAttribute('data-vote');
                    const voteCard = this.closest('.vote-card');
                    const selectedOption = voteCard.querySelector('.vote-option.selected');
                    
                    if (this.classList.contains('voted')) {
                        showToast('你已参与过此投票');
                        return;
                    }
                    
                    if (!selectedOption) {
                        showToast('请先选择一个选项');
                        return;
                    }
                    
                    // 标记为已投票
                    this.classList.add('voted');
                    this.textContent = '已投票';
                    
                    // 更新投票统计（模拟）
                    const optionBar = selectedOption.querySelector('.option-bar');
                    const optionPercent = selectedOption.querySelector('.option-percent');
                    const currentPercent = parseInt(optionPercent.textContent);
                    const newPercent = currentPercent + 1;
                    
                    optionBar.style.width = `${newPercent}%`;
                    optionPercent.textContent = `${newPercent}%`;
                    
                    // 更新参与人数
                    const voteInfo = voteCard.querySelector('.vote-info');
                    const currentCount = parseInt(voteInfo.textContent.match(/\d+/)[0]);
                    voteInfo.textContent = `已有 ${currentCount + 1} 人参与投票`;
                    
                    showToast('投票成功');
                });
            });
            
            // 评论按钮
            commentButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const voteId = this.getAttribute('data-vote');
                    showToast('查看评论区');
                });
            });
            
            // 分享按钮
            shareButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const voteId = this.getAttribute('data-vote');
                    showToast('分享链接已复制到剪贴板');
                });
            });
            
            // 收藏按钮
            favoriteButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const voteId = this.getAttribute('data-vote');
                    const icon = this.querySelector('i');
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('active');
                        showToast('已收藏该投票');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('active');
                        showToast('已取消收藏');
                    }
                });
            });
        }
        
        // 初始化
        function init() {
            bindEvents();
        }
        
        // 启动
        init();
    </script>
</body>
</html>
